<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head >

  <title>AdminLTE 2 | Log in</title>

  <div th:replace="common/header :: metaHeader"></div>
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="static/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="static/admin-lte/css/AdminLTE.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="static/admin-lte/plugins/iCheck/square/blue.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition login-page">
<div class="login-box">
  <div class="login-logo">
    <a href="index2.html"><b>Admin</b>LTE</a>
  </div>
  <!-- /.login-logo -->
  <div class="login-box-body">
    <p class="login-box-msg" th:text="${info}">Sign in to start your session</p>

    <form action="login" method="post">
      <div class="form-group has-feedback">
        <input type="text" name="username" class="form-control" placeholder="Username">
        <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" name="password" class="form-control" placeholder="Password">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <!--_csrf在header中取不到，是在cookie中，但是CsrfFilter是从head中或者parameter中取，所以这里定义在参数里-->
      <input type="hidden" name="_csrf" th:value="${_csrf.token}">
      <div class="row">
        <div class="col-xs-8">
          <div class="checkbox icheck">
            <label>
              <!--name属性是spring-security默认的支持属性-->
              <input type="checkbox" name="remember-me"> Remember Me
            </label>
          </div>
        </div>
        <!-- /.col -->
        <div class="col-xs-4">
          <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
        </div>
        <!-- /.col -->
      </div>
    </form>

    <div class="social-auth-links text-center">
      <p>- OR -</p>
      <div th:each="client:${clients}">
        <a href="#" class="btn btn-block btn-social btn-microsoft btn-flat" th:href="${client.key}">
          <i class="fa" th:text="${#strings.substring(client.value,0,1)}"></i>
          <label th:text="${#httpServletRequest.getContextPath() + client.value}"></label>
          </a>
      </div>
    </div>
    <!-- /.social-auth-links -->

    <a href="#">I forgot my password</a><br>
  </div>
  <!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<!-- jQuery 3 -->
<script src="static/jquery/jquery.min.js"></script>
<!--<script src="static/jquery/jquery.cookie.js"></script>-->
<!-- Bootstrap 3.3.7 -->
<script src="static/bootstrap/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="static/admin-lte/plugins/iCheck/icheck.min.js"></script>
<script>
  $(function () {
    $('input').iCheck({
      checkboxClass: 'icheckbox_square-blue',
      radioClass: 'iradio_square-blue',
      increaseArea: '20%' /* optional */
    });

    //console.log($.cookie('XSRF-TOKEN'));
    //$('#_csrf').val($.cookie('XSRF-TOKEN'));
  });

  //在session过期后iframe内出现登陆页问题
  window.onload = function () {
     if (top.location.href != location.href) {
        top.location.href = document.URL;
     }
  }
</script>
</body>
</html>
